<!-- components/GlobalLoading.vue -->
<template>
  <transition name="fade">
    <div v-show="isLoading" class="global-loading-mask" :style="{ backgroundColor }" aria-live="polite" aria-busy="true">
      <div class="loading-content">
        <!-- 默认插槽 -->
        <slot v-if="$slots.default" />
        <!-- 默认内容 -->
        <div v-else class="default-content">
          <el-icon class="is-loading" :size="iconSize" :color="iconColor">
            <Loading />
          </el-icon>
          <span class="loading-text" :style="{ fontSize: textSize, color: textColor }">
            {{ text }}
          </span>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup>
import { Loading } from '@element-plus/icons-vue'

const props = defineProps({
  isLoading: {
    type: Boolean,
    required: true
  },
  // 自定义属性
  text: {
    type: String,
    default: '正在处理中，请稍候...'
  },
  iconSize: {
    type: [Number, String],
    default: 24
  },
  iconColor: {
    type: String,
    default: '#409EFF'
  },
  textSize: {
    type: String,
    default: '18px'
  },
  textColor: {
    type: String,
    default: '#409EFF'
  },
  backgroundColor: {
    type: String,
    default: 'rgba(255, 255, 255, 0.2)'
  }
})
</script>

<style scoped>
.global-loading-mask {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;

  .loading-content {
    .default-content {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-direction: column;
    }

    .loading-text {
      animation: pulse 1.5s infinite;
    }
  }
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

@keyframes rotating {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.el-icon.is-loading {
  animation: rotating 2s linear infinite;
}
</style>
